<template>
  <div class="main-layout">
    <div class="keyword-popup-header">
      <div class="header-left"></div>
      <!-- 占位元素，保持布局结构 -->
      <div class="popup-title">Keywords</div>
      <!-- 标题文字 -->
      <div class="close-button" @click="$emit('close')">
        <img src="@/assets/close.png" alt="Close" class="close-icon" />
      </div>
    </div>
    <div class="review-statistics">
      <div class="statistic-count">{{ keywordData.totalReviews }}</div>
      <div class="statistic-label">Reviews</div>
    </div>
    <div class="keyword-content-container">
      <div
        v-for="(item, index) in keywordData.keywords"
        :key="index"
        class="keyword-card"
        :class="getCardColorClass(item.score)"
      >
        <div class="keyword-info">
          <div class="keyword-title">{{ item.title }}</div>
          <div class="keyword-score">/ {{ item.score }}</div>
        </div>
        <div class="review-stat">
          <div class="review-count">{{ item.reviewCount }} reviews /</div>
          <div class="review-sentiment">{{ item.sentiment }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import RoomComfort from "./components/RoomComfort.vue";
// import PositiveReviews from "./components/PositiveReviews.vue";
// import DetailedMetrics from "./components/DetailedMetrics.vue";

export default {
  components: {
    // RoomComfort,
    // PositiveReviews,
    // DetailedMetrics,
  },
  props: {
    // 接收子组件传递的当前模块数据
    keywordData: {
      type: Object,
      default: () => ({ title: "", totalReviews: 0, keywords: [] }),
    },
  },
  data() {
    return {
      // 模拟七组关键词数据（包含评分）
      // keywordData: [
      //   {
      //     title: "City views/",
      //     score: 7.4,
      //     reviewCount: 230,
      //     sentiment: "7 positive",
      //   },
      //   {
      //     title: "Room comfort/",
      //     score: 9.2,
      //     reviewCount: 180,
      //     sentiment: "15 positive",
      //   },
      //   {
      //     title: "Service quality/",
      //     score: 5.8,
      //     reviewCount: 300,
      //     sentiment: "3 negative",
      //   },
      //   {
      //     title: "City views/",
      //     score: 7.4,
      //     reviewCount: 230,
      //     sentiment: "7 positive",
      //   },
      //   {
      //     title: "City views/",
      //     score: 7.4,
      //     reviewCount: 230,
      //     sentiment: "7 positive",
      //   },
      //   {
      //     title: "City views/",
      //     score: 7.4,
      //     reviewCount: 230,
      //     sentiment: "7 positive",
      //   },
      //   {
      //     title: "City views/",
      //     score: 7.4,
      //     reviewCount: 230,
      //     sentiment: "7 positive",
      //   },
      //   // 补充剩余四组数据...
      // ],
    };
  },
  methods: {
    // 根据评分返回对应的颜色类名
    getCardColorClass(score) {
      if (score > 9) return "keyword-card-green";
      if (score >= 7) return "keyword-card-yellow";
      return "keyword-card-red"; // 1-7分
    },
  },
};
</script>

<style scoped lang="scss">
.main-layout {
  background: #fff;
  //   width: 709px;
  display: flex;
  flex-direction: column;
  //   gap: 24px;
  padding: 32px 24px 32px 24px;
  .keyword-popup-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;

    .header-left {
      width: 24px; // 与关闭按钮宽度一致，确保标题居中对称
    }
    .popup-title {
      font-size: 24px;
      font-weight: 600;
      color: #232323;
      text-align: center;
      flex: 1; // 占据中间所有空间，确保居中
    }
    .close-button {
      width: 24px;
      height: 24px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .review-statistics {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f2ea;
    border-radius: 8px;
    padding: 4px 0;
    margin-bottom: 16px;
    .statistic-count {
      font-size: 24px;
      font-weight: 600;
      color: #232323;
      text-align: center;
    }
    .statistic-label {
      font-size: 16px;
      font-weight: 400;
      color: #8f8f8f;
      text-align: center;
    }
  }
  .keyword-content-container {
    display: flex;
    flex-direction: column;
    color: #fff;
    .keyword-card {
      padding: 10px;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;
      color: #fff;
      .keyword-info {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #fff;
      }
      .review-stat {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 500;
       color: #fff;
      }
    }
  }
  // 动态颜色类（根据评分范围）
  .keyword-card-green {
    background: #21911a;
  }

  .keyword-card-yellow {
    background: #eac74a;
  }

  .keyword-card-red {
    background: #6c0800;
  }

  // 响应式布局：大屏显示两列
  @media (min-width: 768px) {
    .keyword-content-container {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 8px;
      .keyword-card {
        width: calc(50% - 8px); // 两列布局，间距 16px
      }
    }
  }
}
</style>
